<template>
  <div class="comment_area">
    <h4>发表评论</h4>
    <hr />
    <van-button type="info" size="large" @click="publishComment">发表评论</van-button>
    <van-cell-group>
      <van-field v-model="content" placeholder="请输入留言" type="textarea" clearable size="large" />
    </van-cell-group>
    <van-list v-for="(item,i) in commentList" :key="i">
      <div class="userInfo">
        <span>第{{i + 1}}楼</span>
        <span>用户 : {{item.user_name}}</span>
        <span>发表时间: {{item.add_time | dateFormat}}</span>
      </div>
      <div class="body">{{item.content}}</div>
    </van-list>
    <van-button color="#7232dd" size="large" plain @click="showMore">加载更多</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      commentList: [],
      pageSize: 1,
      content: ""
    };
  },
  created() {
    this.getComment();
  },
  methods: {
    async getComment() {
      const { data: res } = await this.$http.get(
        "/api/getcomments/" +
          this.$route.params.id +
          "?pageindex=" +
          this.pageSize
      );
      if (res.status != 0) return this.$toast("获取评论列表失败");
      this.commentList = res.message;
    },
    async showMore() {
      this.pageSize++;
      const { data: res } = await this.$http.get(
        "/api/getcomments/" +
          this.$route.params.id +
          "?pageindex=" +
          this.pageSize
      );
      this.commentList.push(...res.message);
    },
    async publishComment() {
      if (this.content.trim() === "") {
        return this.$toast("评论内容不能为空");
      }
      const { data: res } = await this.$http.post(
        "/api/postcomment/" + this.$route.params.id,
        {
          content: this.content
        }
      );
      this.getComment();
      this.content = "";
    }
  }
};
</script>
<style lang="less" scoped>
.comment_area {
  padding: 10px;
}
.userInfo {
  height: 30px;
  line-height: 30px;
  background-color: #ccc;
  span {
    font-size: 12px;
    margin-right: 5px;
  }
}
.body {
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.van-cell {
  margin: 10px 0;
  border: 1px solid #ccc;
}
</style>